<template>
  <div class="detail">
    <div class="swiper">
      <image-zoomer :src="currentImg" :width="500" :height="500">
      </image-zoomer>
      <div class="tabs">
        <div v-for="img in bannerArray" :key="img.id">
          <img :src="img.path" alt="" @click="changeImg($event)" />
        </div>
      </div>
    </div>
    <div class="good-detail">
      <p class="title">{{ good.name }}</p>
      <p class="desc">{{ good.desc }}</p>
      <p class="price">
        价格:<span
          :style="good.sale_price ? 'text-decoration: line-through' : ''"
          >￥{{ good.price }}</span
        >
      </p>
      <p class="sale-price" v-if="good.sale_price">
        优惠价格:<span>￥{{ good.sale_price }}</span>
      </p>
      <p class="stock">
        库存:<span>{{ good.stock_num }}</span>
      </p>
      <div class="number">
        <span>数量:</span>
        <el-input-number
          @change="numChange"
          class="numInput"
          v-model="goodNum"
          :min="1"
          :max="10"
          label="描述文字"
        ></el-input-number>
      </div>
      <div class="operate">
        <button @click="addCart" class="add-cart btn bounceBtn">
          加入购物车
        </button>
        <button class="bounceBtn btn" @click="goOrderConfirm()">
          立即购买
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import ImageZoomer from "ht-image-zoomer";
import {
  getGood,
  addCart,
  getAddress,
  getCart,
  UpdateCart,
} from "@/assets/request";
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
import "swiper/css/swiper.css";

export default {
  name: "Detail",
  title: "Navigation",
  data() {
    return {
      bannerArray: [],
      good: {},
      goodId: 0,
      number: 1,
      goodNum: 1,
      address: [],
      currentImg: "",
      checkedArrayRightNow: "",
      price: 24,
    };
  },
  methods: {
    async addCart() {
      const resAddCart = await addCart({
        goods_id: this.goodId,
        num: this.goodNum,
        project_id: "259",
      });
    },
    numChange(val) {
      this.goodNum = val;
    },
    changeImg(e) {
      this.currentImg = e.target.src;
    },
    async goOrderConfirm() {
      const resCart = await getCart();
      const cartArray = resCart.data.result;
      const flag = cartArray.some((item) => item.goods_id == this.good.id);
      if (flag) {
        this.checkedArrayRightNow = [
          cartArray.find((item) => item.goods_id == this.good.id),
        ];
        this.checkedArrayRightNow[0].num = this.goodNum;
      } else {
        this.addCart();
        this.getCheckedArrayRightNow();
      }
      this.setCheckedArrayRightNow();
      this.$router.push({
        name: "orderconfirm",
      });
    },
    async getCheckedArray() {},
    async getCheckedArrayRightNow() {
      const resCart = await getCart();
      const cartArray = resCart.data.result;
      this.checkedArrayRightNow = cartArray.filter(
        (item) => item.goods_id == this.good.id
      );
    },
    setCheckedArrayRightNow() {
      sessionStorage.setItem(
        "checkedArrayRightNow",
        JSON.stringify(this.checkedArrayRightNow)
      );
    },
    async updateNum(id, num) {
      const resUpdateCart = await UpdateCart(
        {
          project_id: 259,
          num: num,
        },
        id
      );
    },

    async getGoodCur() {
      this.goodId = this.$route.params.id;
      console.log(this.goodId);
      const resGood = await getGood(
        {
          project_id: 259,
        },
        this.goodId
      );
      this.good = resGood.data.result;
      this.bannerArray = this.good.s_goods_photos;
      this.currentImg = this.bannerArray[0].path;
    },
  },
  components: {
    Swiper,
    SwiperSlide,
    ImageZoomer,
  },
  directives: {
    swiper: directive,
  },
  async mounted() {
    this.getGoodCur();
    console.log((this.price / 3).toFixed(2));
  },
};
</script>

<style lang="scss" scoped>
@import "../assets/style/bounceBtn.scss";
.detail {
  display: flex;
  justify-content: start;
  width: 1200px;
  height: 100%;
  margin: 0 auto;
  padding-bottom: 100px;
  .swiper {
    width: 500px;
    height: 470px;
    .tabs {
      display: flex;
      width: 100%;
      height: 100px;
      img {
        width: 100px;
        height: 100%;
      }
    }
  }
  .good-detail {
    width: 700px;
    height: 470px;
    padding: 20px;
    p {
      position: relative;
      display: flex;
      align-items: center;
      font-size: 16px;
      margin-bottom: 30px;
      span {
        position: absolute;
        left: 100px;
        margin-right: 20px;
      }
    }
    .desc {
      font-size: 12px;
    }
    .title {
      font-size: 20px;
      padding: 10px 0;
      margin-bottom: 10px;
    }
    .address {
      padding: 5px 0;
    }
    .price {
      font-size: 16px;
    }
    .stock {
      font-size: 16px;
    }
    .sale-price {
      span {
        color: red;
      }
    }
    .number {
      position: relative;
      font-size: 16px;
      .numInput {
        position: absolute;
        left: 100px;
      }
    }
    .operate {
      margin-top: 80px;
      .btn {
        margin-left: 50px;
      }
    }
  }
}
</style>
